<template>
  <h4>unsername: {{ username }}</h4>
  <h4>age: {{ age }}</h4>
  <h4>job: {{ job.type }}</h4>
  <h4>compensation: {{ job.compensation }}</h4>
  <h4>hobby: {{hobby}}</h4>
  <button @click="onBtnClick">Press to change</button>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  name: "App",

  setup() {
    const username = ref("张三");
    const age = ref(22)
    // reactive() 无法处理基本数据类型
    // const age = reactive(19)

    // 使用 reactive() 处理对象，可以得到一个被处理对象的代理对象（Proxy）
    let job = reactive({
      type: '种地',
      compensation: 4800
    })

    // reactive() 可以处理数组
    let hobby = reactive(['抽烟', '喝酒', '烫头'])

    function onBtnClick() {
      username.value = "李四"
      age.value = 48
      // 该 Proxy 对象支持响应式，直接修改该对象就可以驱动数据修改和页面更新
      job = {
        type: '卖菜',
        compensation: '6140'
      }

      // 直接对数组元素进行操作也是支持响应式的
      hobby[2] = '吹水'
    }

    return {
      username,
      age,
      job,
      hobby,
      onBtnClick
    };
  },
};
</script>

<style></style>
